/**
 * 首页背景地图组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import $ from 'jquery'
import adaptivePx from '@/utils/adaptivePx'

let main = ref()

let myChart = null

function init(data) {
  $.get('/geojson/world.json', function (worldJson) {
    echarts.registerMap('world', worldJson)

    myChart = echarts.init(main.value)

    let option = {
      tooltip: {
        textStyle: {
          color: 'black',
          fontSize: adaptivePx(16),
          fontWeight: 'normal'
        },
        backgroundColor: 'rgba(171, 182, 212, 0.9)',
        formatter: function (params) {
          return params.value[4]
        }
      },
      geo: {
        map: 'world',
        center: [108, 21],
        nameMap: {
          'China': '中国',
          'Bangladesh': '孟加拉',
          'Vietnam': '越南',
          'Philippines': '菲律宾',
          'Indonesia': '印尼'
        },
        itemStyle: {
          color: 'black',
          areaColor: '#252558',
          borderColor: '#666',
        },
        label: {
          color: 'white',
          fontWeight: 'normal',
          fontSize: adaptivePx(24)
        },
        emphasis: {
          itemStyle: {
            areaColor: 'purple'
          },
          label: {
            color: 'white',
            fontWeight: 'normal',
            fontSize: adaptivePx(24)
          }
        },
        roam: true,
        zoom: 2.8
      },
      series: [
        {
          id: 'scatter',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: adaptivePx(16),
          itemStyle: {
            color: '#0efacc',
            borderColor: '#666',
            borderWidth: adaptivePx(2),
            borderType: 'solid'
          },
          label: {
            show: true,
            color: 'white',
            position: 'bottom',
            fontSize: adaptivePx(14),
            fontWeight: 'bold',
            distance: adaptivePx(-15),
            formatter: function (params) {
              return params.value[2]
            }
          },
          animation: true,
          data: data
        }
      ]
    }

    myChart.setOption(option)
  })
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  let data = [
    {
      "address": "湖南省双峰县",
      "factory_code": "FS",
      "latitude": "27.44",
      "accpt_factory": "FS",
      "factory_name": "双峰",
      "dept_id": "-4",
      "longitude": "112.18"
    },
    {
      "address": "湖南省洞口县",
      "factory_code": "DK",
      "latitude": "27.05",
      "accpt_factory": "DK",
      "factory_name": "洞口",
      "dept_id": "-5",
      "longitude": "110.57"
    },
    {
      "address": "广东省东莞市",
      "factory_code": "PCC",
      "latitude": "23.04",
      "factory_name": "STELLA PCC",
      "dept_id": "-2",
      "longitude": "113.75"
    },
    {
      "address": "越南安老",
      "factory_code": "AL",
      "latitude": "20.50",
      "factory_name": "安老",
      "longitude": "106.20"
    },
    {
      "address": "越南广宁",
      "factory_code": "GN",
      "latitude": "21.50",
      "factory_name": "广宁",
      "longitude": "107.20"
    },
    {
      "address": "越南太平",
      "factory_code": "TP",
      "latitude": "19.45",
      "factory_name": "太平",
      "longitude": "105.20"
    },
    {
      "address": "印尼泗水",
      "factory_code": "DD",
      "latitude": "-7.27",
      "factory_name": "泗水",
      "longitude": "112.70"
    },
    {
      "address": "印尼solo",
      "factory_code": "SS",
      "latitude": "-7.56",
      "factory_name": "solo",
      "longitude": "110.82"
    },
    {
      "address": "菲律宾",
      "factory_code": "PA",
      "latitude": "12.60",
      "factory_name": "菲律宾一厂",
      "longitude": "122.00"
    },
    {
      "address": "孟加拉",
      "factory_code": "BG",
      "latitude": "24.20",
      "factory_name": "孟加拉",
      "longitude": "90.24"
    }
  ]
  let myData = []
  for (let i = 0; i < data.length; i++) {
    myData.push({
      name: data[i].address,
      value: [data[i].longitude, data[i].latitude, data[i].factory_code, data[i].accpt_factory, data[i].factory_name]
    })
  }
  init(myData)
  
  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="home-geo" ref="main"></div>
</template>

<style lang="scss" scoped>
#home-geo {
  width: 100%;
  height: 100%;
  background-color: #12161b;
}
</style>